<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="项目列表" name="1" id="htmlxlsx">
        <div>
          <div class="search_box">
            <el-input placeholder="项目名" v-model="pag.project_name">
            </el-input>
            <el-button type="primary" @click="getProject">搜索</el-button>
            <el-button @click="resetSearch1">重置</el-button>
            <!-- <el-button @click="exportXslx">导出</el-button> -->
          </div>
          <div class="export_box">
            <el-button type="primary" @click="projectVisible = true"
              >新建项目</el-button
            >
          </div>
          <el-table :data="projectList" style="width: 100%" :height="h" border>
            <el-table-column
              prop="start_time"
              label="创建日期"
              :formatter="timestampToTime"
              align="center"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="project_name"
              label="项目名称"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="lessee_name" label="承租方" align="center">
            </el-table-column>
            <el-table-column prop="lessee_person" label="负责人" align="center">
            </el-table-column>
            <el-table-column
              prop="lessee_phone"
              label="负责人电话"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="lessor_name" label="出租方" align="center">
            </el-table-column>
            <el-table-column prop="lessor_person" label="负责人" align="center">
            </el-table-column>
            <el-table-column
              prop="lessor_phone"
              label="负责人电话"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="contract"
              label="是否签订合同"
              align="center"
            >
              <template slot-scope="scope">
                {{
                  scope.row.contract == 1
                    ? "已签"
                    : scope.row.contract == 2
                    ? "未签"
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="contract_time"
              label="合同签订日期"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="contract_price"
              label="合同金额"
              align="center"
              width="100"
            >
              <template slot-scope="scope">
                {{
                  Number(scope.row.contract_price) > 0
                    ? Number(scope.row.contract_price).toFixed(4)
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="contract_type"
              label="合同类型"
              align="center"
            >
              <template slot-scope="scope">
                {{
                  scope.row.contract_type == 1
                    ? "台班"
                    : scope.row.contract_type == 2
                    ? "月租"
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="contract_status"
              label="项目状态"
              align="center"
            >
              <template slot-scope="scope">
                {{
                  scope.row.contract_status == 1
                    ? "进行中"
                    : scope.row.contract_status == 2
                    ? "已完工"
                    : ""
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="项目备注"
              align="center"
              width="300px"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="200"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="editProject(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" @click="toProjectInfo(scope.row)"
                  >项目信息概况</el-button
                >
                <el-button type="text" @click="toInfo(scope.row)"
                  >出车记录</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="page_table">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[10, 20, 30, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pag.total"
            >
            </el-pagination>
          </div>
          <!-- 新增项目 -->
          <el-dialog
            title="出车记录录入"
            :visible.sync="projectVisible"
            :before-close="closeAddCustomer"
            width="920px"
          >
            <el-form
              :inline="true"
              :model="form"
              class="demo-form-inline"
              label-width="120px"
              ref="customerForm"
              :rules="rules"
            >
              <el-form-item label="项目名称" prop="project_name">
                <el-input
                  v-model="form.project_name"
                  type="textarea"
                  :rows="2"
                ></el-input>
              </el-form-item>
              <br />
              <el-form-item label="承租方" prop="lessee">
                <el-select
                  v-model="form.lessee"
                  @change="changeCustomer"
                  :disabled="edit"
                  filterable
                >
                  <el-option
                    v-for="item in customersList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="负责人" prop="lessee_person">
                <el-input v-model="form.lessee_person"></el-input>
              </el-form-item>
              <el-form-item label="负责人电话" prop="lessee_phone">
                <el-input v-model="form.lessee_phone"></el-input>
              </el-form-item>
              <br />
              <el-form-item label="出租方" prop="lessor">
                <el-select
                  v-model="form.lessor"
                  @change="changeCompany"
                  :disabled="edit"
                  filterable
                >
                  <el-option
                    v-for="item in companyList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="负责人" prop="lessor_person">
                <el-input v-model="form.lessor_person"></el-input>
              </el-form-item>
              <el-form-item label="负责人电话" prop="lessor_phone">
                <el-input v-model="form.lessor_phone"></el-input>
              </el-form-item>
              <el-form-item label="是否签订合同" prop="contract">
                <el-select v-model="form.contract">
                  <el-option value="1" label="已签"></el-option>
                  <el-option value="2" label="未签"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="合同签订日期" prop="contract_time">
                <el-date-picker
                  v-model="form.contract_time"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy/MM/dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="合同金额" prop="contract_price">
                <el-input
                  v-model="form.contract_price"
                  type="number"
                ></el-input>
              </el-form-item>
              <el-form-item label="合同签订类型" prop="contract_type">
                <el-select v-model="form.contract_type">
                  <el-option value="1" label="台班"></el-option>
                  <el-option value="2" label="月租"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目状态" prop="contract_status">
                <el-select v-model="form.contract_status">
                  <el-option value="1" label="进行中"></el-option>
                  <el-option value="2" label="已完工"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="项目备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="closeAddCustomer">取 消</el-button>
              <el-button type="primary" @click="addProject">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-tab-pane>

      <!-- 项目详情 -->
      <el-tab-pane v-if="activeName == 2" label="项目详情" name="2">
        <div>
          <div class="pro_box">
            <div class="search_box">
              <el-input v-model="pag1.plate" placeholder="车牌"> </el-input>
              <el-select v-model="pag1.source" placeholder="车辆来源">
                <el-option value="1" label="自有"></el-option>
                <el-option value="2" label="租赁"></el-option>
              </el-select>
              <el-select v-model="pag1.is_bill1" placeholder="是否签单">
                <el-option value="1" label="已签单"></el-option>
                <el-option value="2" label="未签单"></el-option>
              </el-select>
              <el-date-picker
                v-model="pag1.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
              <el-button type="primary" @click="getInfoList">搜索</el-button>
              <el-button @click="resetSearch2">重置</el-button>
            </div>

            <div>
              <el-button type="primary" @click="printListData"
                >导出数据</el-button
              >
            </div>
          </div>
          <el-table
            :data="proCarsList"
            style="width: 100%"
            :height="h + 50"
            border
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="create_time"
              label="日期"
              align="center"
              width="160"
            >
              <template slot-scope="scope">
                <div>
                  {{
                    !Array.isArray(scope.row.create_time)
                      ? scope.row.start_time
                      : `${scope.row.start_time} - ${scope.row.end_time}`
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="plate"
              label="车牌"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <div
                  :style="{
                    color: scope.row.source == 1 ? '#67c23a' : '#f56c6c',
                  }"
                >
                  {{ scope.row.plate }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="specifications" label="规格" align="center">
            </el-table-column>
            <el-table-column
              prop="unit_price"
              label="单价"
              align="center"
              width="100px"
            >
            </el-table-column>
            <el-table-column prop="units" label="计量单位" align="center">
            </el-table-column>
            <el-table-column prop="agreed_time" label="额定工时" align="center">
            </el-table-column>
            <el-table-column prop="true_time" label="实际工时" align="center">
            </el-table-column>
            <el-table-column
              prop="price1"
              label="金额"
              align="center"
              width="100px"
            >
            </el-table-column>
            <el-table-column
              prop="overtime_unit"
              label="加班单价"
              align="center"
              width="100px"
            >
            </el-table-column>
            <el-table-column
              prop="overtime_hours"
              label="加班时长"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="overtime_price"
              label="加班费"
              align="center"
              width="100px"
            >
            </el-table-column>
            <el-table-column prop="other_price" label="其他费用" align="center">
            </el-table-column>
            <el-table-column
              prop="other_remark"
              label="其他费用说明"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="total_price"
              label="合计金额"
              align="center"
              width="110"
            >
            </el-table-column>
            <el-table-column prop="operator" label="操作人员" align="center">
            </el-table-column>
            <el-table-column prop="lessee" label="承租单位" align="center">
            </el-table-column>
            <el-table-column prop="dispatcher" label="派车人员" align="center">
            </el-table-column>
            <el-table-column prop="company" label="派车单位" align="center">
            </el-table-column>
            <el-table-column
              prop="content"
              label="工作内容"
              align="center"
              width="300"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
              width="300"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="type"
              label="是否签单"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <div
                  :style="{
                    color: scope.row.is_bill1 == 1 ? '#67c23a' : '#f56c6c',
                  }"
                >
                  {{ scope.row.is_bill1 == 1 ? "已签单" : "未签单" }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="page_table">
            <span style="line-height: 35px; margin-right: 30px"
              >总金额:
              <span style="color: red">{{ totalPrice.toFixed(4) }}</span></span
            >
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="1"
              :page-sizes="[10, 20, 30, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pag1.total"
            >
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <!-- 项目信息概况 -->
      <el-tab-pane v-if="activeName == 3" label="项目信息概况" name="3">
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          label-width="120px"
          ref="customerForm"
          :rules="rules"
        >
          <div
            v-for="(item, index) in projectInfoList"
            :key="index"
            class="otherbox"
          >
            <el-form-item label="机械类型" prop="">
              <el-input v-model="item.jixie_type"></el-input>
            </el-form-item>
            <el-form-item label="规格" prop="">
              <el-input v-model="item.guige" type="number">
                <template slot="append">吨</template></el-input
              >
            </el-form-item>
            <el-form-item label="类型" prop="">
              <el-select v-model="item.type">
                <el-option value="1" label="台班"></el-option>
                <el-option value="2" label="月租"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="额定工时" prop="">
              <el-input v-model="item.worktime" type="number">
                <template slot="append">小时</template></el-input
              >
            </el-form-item>
            <br />
            <el-form-item label="不含税单价" prop="">
              <el-input v-model="item.untis" type="number"></el-input>
            </el-form-item>
            <el-form-item label="税率" prop="">
              <el-input v-model="item.tax" type="number"></el-input>
            </el-form-item>
            <el-form-item label="含税单价" prop="">
              <el-input v-model="item.untis1" type="number"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="不含税加班单价" prop="">
              <el-input v-model="item.overtime_untis" type="number"></el-input>
            </el-form-item>
            <el-form-item label="税率" prop="">
              <el-input v-model="item.overtime_tax" type="number"></el-input>
            </el-form-item>
            <el-form-item label="含税加班单价" prop="">
              <el-input v-model="item.overtime_untis1" type="number"></el-input>
            </el-form-item>
            <el-button type="danger" @click="delOther(item)">删除</el-button>
          </div>
        </el-form>
        <div style="display: flex; justify-content: center">
          <el-button type="success" @click="addOther">添加</el-button>
          <el-button type="primary" @click="submitOther">提交</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getDataByKey, openDB, changeDB, editDB, deleteDB } from "@/db/indexdb";
import { searchTable } from "@/db/search";
import { printData } from "@/db/print";

export default {
  data() {
    return {
      activeName: "1",
      projectVisible: false,
      monthsVisible: false,
      visible: false,
      projectBlong: "",
      form: {
        project_name: "",
        lessee: "",
        lessee_person: "",
        lessee_phone: "",
        lessor: "",
        lessor_person: "",
        lessor_phone: "",
        remark: "",
      },
      lessee_name: "",
      lessor_name: "",
      rules: {
        project_name: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        lessee: [{ required: true, message: "请选择承租方", trigger: "blur" }],
        lessor: [{ required: true, message: "请选择出租方", trigger: "blur" }],
      },
      projectList: [], // 项目列表
      customersList: [], // 客户列表
      gsList: [], // 供应商表
      incomlist: [], // 客户供应商集合表
      gs_name: "", //供应商表名字
      companyList: [], // 公司抬头
      concatCompany: [], // 车辆来源
      yg_name: "",
      carsList: [], // 出车记录
      proCarsList: [], // 项目分配车辆
      myCars: [], // 车辆登记表
      projectItem: {},
      carForm: {
        source: "", //车辆来源类型
        company_id: "", // 派车单位
        company: "", // 派车单位名车
        plate: "", //车牌号
        car_type: "", //车辆类型
        type: "1", //出车类型
        units: "", // 计量单位
        specifications: "", //规格
        create_time: "", // 出车日期
        cost: "", //用车成本
        unit_price: "", //单价
        agreed_time: "", // 规定工时
        true_time: "", // 实际工时
        overtime_unit: "", //加班单价
        overtime_hours: "", //加班工时
        overtime_price: "", //加班费
        other1_price: "", //其他费用1
        other1_remark: "", //其他费用1备注
        other2_price: "", //其他费用2
        other2_remark: "", //其他费用2备注
        driver1: "", // 驾驶员
        driver1_commission: "", // 驾驶员提成比例
        driver1_price: "", // 驾驶员提成金额
        driver2: "", // 随行人员
        driver2_commission: "", // 随行人员提成比例
        driver2_price: "", // 随行人员提成金额
        total_price: "", // 总金额
        operator: "", // 操作人
        dispatcher: "", // 派车人
        is_bill: "1", // 是否签单
        content: "", // 工作内容
        remark: "", // 备注
      },
      carRules: {
        company_id: [
          { required: true, message: "请选择派车单位", trigger: "blur" },
        ],
        plate: [{ required: true, message: "请输入车牌", trigger: "blur" }],
        car_type: [
          { required: true, message: "请选择车辆类型", trigger: "blur" },
        ],
        specifications: [
          { required: true, message: "请输入车辆规格", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择出车类型", trigger: "blur" }],
        units: [{ required: true, message: "请输入计量单位", trigger: "blur" }],
        create_time: [
          { required: true, message: "请选择出车日期", trigger: "blur" },
        ],
        unit_price: [
          { required: true, message: "请输入单价", trigger: "blur" },
        ],
        cost: [{ required: true, message: "请输入用车成本", trigger: "blur" }],
        agreed_time: [
          { required: true, message: "请输入工期", trigger: "blur" },
        ],
        true_time: [
          { required: true, message: "请输入实际工时", trigger: "blur" },
        ],
      },
      edit: false,
      pag: {
        project_name: "",
        total: 0,
        page: 1,
        size: 10,
      },
      pag1: {
        plate: "",
        source: "",
        is_bill1: "",
        time: [],
        total: 0,
        page: 1,
        size: 10,
      },
      infoedit: false,
      printList: [],
      h: "",
      totalList: [],
      projectInfoList: [],
      totalPrice: 0,
    };
  },
  created() {
    openDB("car", "list").then(() => {
      this.getProject();
      this.getCustomers();
      this.getCars();
    });
    this.h = document.documentElement.offsetHeight - 320;
  },
  mounted() {
    // this.$refs.radios.$children.forEach((item) => {
    //   item.$refs.radio.removeAttribute("aria-hidden");
    // });
  },
  methods: {
    handleSelectionChange(val) {
      this.printList = val;
    },
    printListData() {
      let header = [
        { value: "create_time", label: "日期", first: 1 },
        { value: "company", label: "派车单位" },
        { value: "plate", label: "车牌" },
        { value: "car_tpe", label: "车型" },
        { value: "specifications", label: "规格" },
        { value: "cost", label: "用车成本", total: 1, type: "n" },
        { value: "units", label: "计量单位" },
        { value: "unit_price", label: "单价", type: "n" },
        { value: "agreed_time", label: "额定工时", type: "n" },
        { value: "true_time", label: "实际工时", type: "n" },
        { value: "price1", label: "金额", total: 1, type: "n" },
        { value: "overtime_unit", label: "加班单价", type: "n" },
        { value: "overtime_time", label: "加班时长", type: "n" },
        { value: "overtime_price", label: "加班费", total: 1, type: "n" },
        {
          value: "other_price",
          label: "其他费用(收客户)",
          total: 1,
          type: "n",
        },
        { value: "other_remark", label: "其他费用说明(收客户)" },
        { value: "total_price", label: "合计金额", total: 1, type: "n" },
        {
          value: "other1_price",
          label: "其他费用(应收供应商)",
          total: 1,
          type: "n",
        },
        { value: "other1_remark", label: "费用说明(应收供应商)" },
        {
          value: "other2_price",
          label: "其他费用(应付客户)",
          total: 1,
          type: "n",
        },
        { value: "other2_remark", label: "费用说明(应付客户)" },
        { value: "content", label: "工作内容" },
        { value: "remark", label: "说明" },
      ];
      console.log(this.projectItem, "this.totalList");
      let msg = {
        msg1: this.projectItem.project_name + "--出车记录",
      };
      printData(msg, this.totalList, header);
    },
    resetSearch1() {
      this.pag = {
        project_name: "",
        total: 0,
        page: 1,
        size: 10,
      };
      this.getProject();
    },
    handleSizeChange(val) {
      this.pag.size = val;
      this.getProject();
    },
    handleCurrentChange(val) {
      this.pag.page = val;
      this.getProject();
    },
    handleSizeChange1(val) {
      this.pag1.size = val;
      this.getInfoList();
    },
    handleCurrentChange1(val) {
      this.pag1.page = val;
      this.getInfoList();
    },
    getProject() {
      getDataByKey("list", "项目表").then((res) => {
        let { total, list } = searchTable(res.data, this.pag, 1);
        console.log(list, "list");
        (this.pag.total = total), (this.projectList = list);
      });
    },
    async getCustomers() {
      getDataByKey("list", "客户表").then((res) => {
        this.customersList = res?.data || [];
      });
      await getDataByKey("list", "供应商表").then(async (res1) => {
        this.gsList = res1?.data || [];
        await this.gsList.map((v) => {
          v.source = 2;
        });
      });
      await getDataByKey("list", "公司信息表").then(async (res) => {
        this.companyList = res?.data || [];
        await this.companyList.map((v) => {
          v.source = 1;
        });
      });
      getDataByKey("list", "员工表").then((res) => {
        this.yg_name = res?.data;
      });
      this.concatCompany = this.companyList.concat(this.gsList || []);
    },
    getCars() {
      openDB("car", "list").then(() => {
        getDataByKey("list", "出车记录表").then((res) => {
          res?.data.sort((b, a) => {
            return Number(a.id) - Number(b.id);
          });
          this.carsList = res?.data;
        });
        getDataByKey("list", "车辆登记表").then((res) => {
          this.myCars = res?.data;
        });
      });
    },

    changeCustomer(val) {
      let cus = this.customersList.filter((v) => {
        return v.id == val;
      })[0];
      this.lessee_name = cus.name;
      this.form.lessee_person = cus.contact;
      this.form.lessee_name = cus.name;
      this.form.lessee_phone = cus.phone;
    },
    changeCompany(val) {
      let cus = this.companyList.filter((v) => {
        return v.id == val;
      })[0];
      console.log(cus);
      this.lessor_name = cus.name;
      this.form.lessor_person = cus.contact;
      this.form.lessor_name = cus.name;
      this.form.lessor_phone = cus.phone;
    },
    timestampToTime(row) {
      var date = new Date(Number(row.id));
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      var d = date.getDate();
      return y + "年" + m + "月" + d + "日";
    },
    editProject(row) {
      this.edit = true;
      this.projectVisible = true;
      this.form = { ...row };
      console.log(row, "row");
      this.form.start_time = [this.form.start_time, this.form.end_time];
      this.lessee_name = row.lessee_person;
      this.lessor_name = row.lessor_person;
    },
    addProject() {
      this.$refs["customerForm"].validate((valid) => {
        if (valid) {
          let data = { ...this.form };
          // data.lessee_id = data.lessee;
          // data.lessee = this.lessee_name;
          // data.lessor_id = data.lessor;
          // data.lessor = this.lessor_name;
          console.log(data, "data");
          if (this.edit) {
            editDB("list", "项目表", data).then((res) => {
              this.getProject();
              this.$message.success("修改成功");
            });
          } else {
            data.id = new Date().getTime();
            changeDB("list", "项目表", data).then(() => {
              this.getProject();
              this.$message.success("添加成功");
            });
          }
          this.closeAddCustomer();
        } else {
          return false;
        }
      });
    },
    closeAddCustomer() {
      this.edit = false;
      this.projectVisible = false;
      this.form = {};
    },

    toInfo(row) {
      this.activeName = "2";
      this.projectItem = { ...row };
      this.getInfoList();
    },
    getInfoList() {
      let search = {
        ...this.pag1,
      };
      let result = this.carsList.filter((item) => {
        return item.project_id == this.projectItem.id;
      });
      search.is_bill1 = Number(search.is_bill1);
      search.source = Number(search.source);
      let { total, list, totalList } = searchTable(result, search, 1);
      this.totalList = totalList;
      this.pag1.total = total;
      let p = 0;
      totalList.map((item) => {
        p = p + Number(item.total_price || 0);
      });
      this.proCarsList = list;
      this.totalPrice = p;
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.type == 2) {
        return "warning-row";
      } else if (row.type == 1) {
        return "";
      }
      return "";
    },
    resetSearch2() {
      this.pag1 = {
        plate: "",
        source: "",
        is_bill1: "",
        time: [],
        total: 0,
        page: 1,
        size: 5000,
      };
      this.getInfoList();
    },
    toProjectInfo(row) {
      this.projectItem = { ...row };
      getDataByKey("list", "项目信息表").then((res) => {
        let list = res?.data;
        let result = list.filter((item) => {
          return item.project_id == row.id;
        });
        this.projectInfoList = result;
        this.activeName = "3";
      });
    },

    delOther(row) {
      this.$confirm("确定删除该条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteDB("list", "项目信息表", row.id)
            .then(() => {
              this.$message({
                type: "success",
                message: "已删除",
              });
              let result = this.projectInfoList.filter((item) => {
                return item.id != row.id;
              });
              this.projectInfoList = result;
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addOther() {
      let obj = {
        id: new Date().getTime(),
        project_id: this.projectItem.id,
        project_name: this.projectItem.project_name,
        type: this.projectItem.contract_type
          ? this.projectItem.contract_type
          : "1",
      };
      this.projectInfoList.push(obj);
    },
    async submitOther() {
      await this.printItemSequentially(this.projectInfoList); // 等待1秒
      this.$message.success("提交成功");
      this.activeName = "1";
    },
    printItemSequentially(arr, index = 0) {
      if (index >= arr.length) return; // 如果所有项都已打印，则停止递归
      setTimeout(() => {
        let item = arr[index];
        deleteDB("list", "项目信息表", item.id).then(() => {
          changeDB("list", "项目信息表", item).then(() => {});
        });
        this.printItemSequentially(arr, index + 1); // 递归调用，增加索引
      }, (index + 1) * 10); // 设置延迟时间，根据索引递增
    },
  },
};
</script>

<style lang="scss" scoped>
.otherbox {
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.search_box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
  .el-input,
  .el-select {
    width: 200px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-date-editor {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .el-button {
    margin-bottom: 20px;
  }
}
.export_box {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}
.page_table {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.el-form {
  .el-select,
  .el-input,
  .el-date-editor {
    width: 160px;
  }
  .el-textarea {
    width: 700px;
  }
  .el-range-editor {
    width: 290px;
  }
}
.pro_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
</style>
<style>
.el-table .warning-row {
  background: #fdf6ec;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
